<template>
  <view class="page">
    <input class="uni-input" :placeholder="$t('搜索关键词')" @input="changInput"/>
    <view style="display: flex;height: 200px">
      <scroll-view :scroll-into-view="scrollViewId" :style="{height:winHeight + 'px;'}" class="scrollList" scroll-y>
        <uni-list :key="keyIndex">
          <view v-for="(list,key) in lists" v-if="list.data[0]" :key="key">
            <view :id="list.letter" class="uni-list-cell-divider">
              {{ list.letter }}
            </view>
            <view v-for="(item,index) in list.data" :key="item.id">
              <uni-list-item
                  v-if="form_type === '审批人' || form_type === '管章人' || form_type === '转交人'"
                  :ellipsis="1" :title="item.userName||item.loginName"
                  clickable
                  @click="secrecy_seal(item)"
              />
              <uni-list-item
                  v-if="form_type === '加盖印章'"
                  :ellipsis="1"
                  :title="item.name"
                  clickable
                  @click="secrecy_seal2(item)"
              />
              <uni-list-item
                  v-if="form_type === 'OCR印章'"
                  :ellipsis="1"
                  :title="item.name"
                  clickable
                  @click="secrecy_seal2(item)"
              />
              <uni-list-item
                  v-if="form_type === '审计人'"
                  :ellipsis="1"
                  :title="item.userName||item.loginName"
                  clickable
                  @click="secrecy_seal3(item)"
              />
              <uni-list-item
                  v-if="form_type === '审批流程'"
                  :ellipsis="1"
                  :title="item.name"
                  clickable
                  @click="secrecy_seal4(item)"
              />
            </view>
          </view>
        </uni-list>
      </scroll-view>
      <view :class="touchmove ? 'active' : ''" :style="{height:winHeight + 'px;'}" class="uni-indexed-list-bar"
            @touchcancel="touchCancel" @touchend="touchEnd" @touchmove="touchMove" @touchstart="touchStart">
        <text v-for="(list,key) in lists" :key="key" :class="touchmoveIndex === key ? 'active' : ''"
              :style="{heigth:itemHeight + 'px',lineHeight:itemHeight + 'px'}"
              class="uni-indexed-list-text">{{ list.letter }}
        </text>
      </view>
      <view v-if="touchmove" class="uni-indexed-list-alert">
        {{ lists[touchmoveIndex].letter }}
      </view>
    </view>

  </view>
</template>

<script>
import {mapGetters, mapMutations} from 'vuex'

export default {
  computed: {...mapGetters(['userInfo', 'api'])},
  data() {
    return {
      keyIndex: 0,
      form_type: '',//从哪个页面来端
      title: 'grid',
      lists: [],//审批人
      touchmove: false,
      touchmoveIndex: -1,
      itemHeight: 0,
      winHeight: 0,
      scrollViewId: "A",
      newLists: []
    }
  },
  onLoad(e) {
    console.log('index-list', e)
    this.form_type = e.type//从哪个页面来端
    uni.setNavigationBarTitle({title: this.$t(this.form_type)})
    let winHeight = uni.getSystemInfoSync().windowHeight - 50;
    this.itemHeight = winHeight / 26;
    this.winHeight = winHeight;
    //获取审批人数据
    if (this.form_type === '审批人' || this.form_type === '转交人') {
      this.get_audit(e.deviceId)
    }
    //获取管章人数据
    if (this.form_type === '管章人') {
      this.getKeepersToUpdateDevice(e.departmentId)
    }
    //获取审批流程
    if (this.form_type === '审批流程') {
      this.get_Approval_process(e.deviceId)
    }
    //获取加盖印章数据
    if (this.form_type === '加盖印章') {
      this.get_cover()
    }
    //获取加盖印章数据
    if (this.form_type === 'OCR印章') {
      this.get_OCRlist()
    }
    //获取审计人数据
    if (this.form_type === '审计人') {
      this.getAuditorsByUpdateDevice(e.departmentId)
    }
  },
  methods: {
    //搜索
    changInput(res) {
      let name = 'name'
      if (this.form_type === '审批人' || this.form_type === '转交人' || this.form_type === '管章人' || this.form_type === '审计人') {
        name = "userName"
      }

      this.lists = [...this.newLists]
      let {keys, values, entries} = Object
      let newData = []
      for (let [keys, values] of entries(this.lists)) {
        let row = values.data.filter((rw) => {
          if (rw[name].includes(res.detail.value)) {
            return rw
          }
        })
        if (row.length > 0) {
          newData.push({
            letter: values.letter,
            data: row
          })
        }
      }
      this.lists = newData
      this.keyIndex++

    },
    //获取审批人或转交人
    get_audit(deviceId) {
      let req = {deviceId: deviceId}
      this.$u.post(this.api.GLOBAL_user_getManagersByAddressList, req).then(res => {
        if (res.code === 200) {
          this.lists = res.data
          this.newLists = [...this.lists]
        }
      })
    },
    //获取管章人
    getKeepersToUpdateDevice(departmentId) {
      this.$u.post(this.api.GLOBAL_auth_user_getKeepersToUpdateDevice, {departmentId: departmentId}).then(res => {
        if (res.code === 200) {
          this.lists = res.data
          this.newLists = [...this.lists]
        }
      })
    },
    //获取审批流程
    get_Approval_process(deviceId) {
      let req = {deviceId: deviceId}
      this.$u.post(this.api.GLOBAL_flow_getByOwnerToAddress, req).then(res => {
        if (res.code === 200) {
          this.lists = res.data
          this.newLists = [...this.lists]
        } else {
          uni.showModal({
            title: this.$t('提示'),
            content: this.$t('管理员未设置审批流程，请在后台设置好'),
            success: (res) => {
              uni.navigateBack({
                delta: 1
              })
            }
          });
        }

      })
    },
    //获取加盖印章数据
    get_cover() {
      this.$u.post(this.api.GLOBAL_signet_getByAddressList, {}).then(res => {
        if (res.code === 200) {
          this.lists = res.data
          this.newLists = [...this.lists]
        }

      })
    },
    //获取ocr加盖印章
    get_OCRlist() {
      this.$u.post(this.api.GLOBAL_signet_getBoundToHighDevices, {}).then(res => {
        if (res.code === 200) {
          this.lists = res.data
          this.newLists = [...this.lists]
        }
      })
    },
    //获取审计人数据
    getAuditorsByUpdateDevice(departmentId) {
      this.$u.post(this.api.GLOBAL_auth_user_getAuditorsByUpdateDevice, {departmentId: departmentId}).then(res => {
        if (res.code === 200) {
          this.lists = res.data
          this.newLists = [...this.lists]
        }
      })
    },
    //选取审批流程
    secrecy_seal4(item) {
      uni.$emit('Approval_process', item)
      uni.navigateBack({
        delta: 1
      })
    },
    //选取审批人
    secrecy_seal(item) {
      let arr = {
        value: item.id,
        label: item.userName || item.loginName
      }
      if (this.form_type === '审批人') {
        uni.$emit('data_audit', arr)
      } else if (this.form_type === '转交人') {
        uni.$emit('data_transfer', arr)
      } else if (this.form_type === '管章人') {
        uni.$emit('data_tubeSeal', arr)
      } else if (this.form_type === '审计人') {
        uni.$emit('data_shenji', arr)
      }

      uni.navigateBack({
        delta: 1
      })
    },
    //选取加盖印章
    secrecy_seal2(item) {
      let arr = {
        value: item.id,
        label: item.name,
        data: item
      }
      if (this.form_type === '加盖印章' || this.form_type === 'OCR印章') {
        uni.$emit('data_cover', arr)
      }
      uni.navigateBack({
        delta: 1
      })
    },
    //选取审计人
    secrecy_seal3(item) {
      let arr = {
        value: item.id,
        label: item.userName
      }
      if (this.form_type === '审计人') {
        uni.$emit('data_shenji', arr)
      }
      uni.navigateBack({
        delta: 1
      })
    },
    touchStart(e) {
      this.touchmove = true;
      let pageY = e.touches[0].pageY - 40;
      let index = Math.floor(pageY / this.itemHeight);
      this.scrollViewId = this.lists[index].letter;
      this.touchmoveIndex = index;
    },
    touchMove(e) {
      let pageY = e.touches[0].pageY;
      let index = Math.floor(pageY / this.itemHeight);
      this.scrollViewId = this.lists[index].letter;
      this.touchmoveIndex = index;
    },
    touchEnd() {
      this.touchmove = false;
      this.touchmoveIndex = -1;
    },
    touchCancel() {
      this.touchmove = false;
      this.touchmoveIndex = -1;
    }
  }
}
</script>

<style lang="scss" scoped>
.page {
  width: 100%;
  padding: 0;
  margin: 0;
}

.uni-input {
  font-size: 28rpx;
  padding: 20rpx;
  text-align: center;
  position: sticky;
  top: 0;
}

.uni-list-cell-divider {
  font-size: 30upx;
  background-color: #f0f0f0;
  padding: 4rpx 30rpx;
}

.scrollList {
  height: 87vh;
}

.uni-indexed-list-bar {
  width: 46upx;
  height: 87vh;
  background-color: lightgrey;
  display: flex;
  flex-direction: column;
}

.uni-indexed-list-bar.active {
  background-color: rgb(200, 200, 200);
}

.uni-indexed-list-text {
  color: #aaa;
  font-size: 22upx;
  text-align: center;
}

.uni-indexed-list-bar.active .uni-indexed-list-text {
  color: #333;
}

.uni-indexed-list-text.active,
.uni-indexed-list-bar.active .uni-indexed-list-text.active {
  color: #007AFF;
}

.uni-indexed-list-alert {
  position: absolute;
  z-index: 20;
  width: 160upx;
  height: 160upx;
  left: 50%;
  top: 50%;
  margin-left: -80upx;
  margin-top: -80upx;
  border-radius: 80upx;
  text-align: center;
  line-height: 160upx;
  font-size: 70upx;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.5);
}
</style>
